<template>
	<view class="flex_c_c page filter-page">
		<view class="flex_r fa_c fj_b top" :style="{ top: $store.state.StatusBar.statusBar + 'px' }">
			<view class="top-icon" @click="to()">
				<u-icon name="arrow-left" size="42rpx" color='#fff'></u-icon>
			</view>
			<view class="top-icon">
			</view>
		</view>
		<view class="text_38 title c-fff">
			账号注册
		</view>
		<view class="form">
			<view class="flex_r form-row px-24">
				<view class="text_34 form-row-title c-fff">
					+86
				</view>
				<view class="flex1 form-row-input">
					<input v-model="formData.a" type="text" placeholder="请输入手机号">
				</view>
				<view class="m-line">
					<m-line color="#B8B8B8" length="100%" :hairline="true"></m-line>
				</view>
			</view>
			<view class="flex_r form-row">
				<view class="text_34 form-row-title c-fff">
					验证码
				</view>
				<view class="flex1 form-row-input">
					<input v-model="formData.b" type="text" placeholder="请输入验证码">
				</view>
				<view class="form-row-code">
					获取验证码
				</view>
				<view class="m-line">
					<m-line color="#B8B8B8" length="100%" :hairline="true"></m-line>
				</view>
			</view>

			<view class="flex_r form-row">
				<view class="text_34 form-row-title c-fff">
					密码
				</view>
				<view class="flex1 form-row-input">
					<input v-model="formData.c" type="text" placeholder="请输入密码">
				</view>
				<view class="m-line">
					<m-line color="#B8B8B8" length="100%" :hairline="true"></m-line>
				</view>
			</view>
			<view class="flex_r form-row">
				<view class="text_34 form-row-title c-fff">
					邀请码
				</view>
				<view class="flex1 form-row-input">
					<input v-model="formData.d" type="text" placeholder="请输入邀请码">
				</view>
				<view class="m-line">
					<m-line color="#B8B8B8" length="100%" :hairline="true"></m-line>
				</view>
			</view>

		</view>

		<view class="botton">
			<view class="size_white text_30 button" @click="submit">
				注册
			</view>
			<view class="icon_ agreement">
				<view class="">
					<u-checkbox-group shape="circle" activeColor="#FDB175" v-model="checked" @change="checkboxChange">
						<u-checkbox :name="1">
						</u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="c-fff f-28">
					同意用户协议<span @click="goAgreement">《用户协议》</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {
	show,
	to
} from '@/utils/index.js';
export default {
	data() {
		return {
			checked: true,
			formData: {
				a: '',
				b: '',
				c: '',
				d: ''
			}
		}
	},
	onLoad() {
	},
	methods: {
		to,
		checkboxChange(e) {
			this.checked = e
		},
		submit() {
			let formDataCheck = {
				a: '请输入a',
				b: '请输入b',
				c: '请输入c',
				d: '请输入d'
			};
			let data = {}
			for (const key in this.formData) {
				if (this.formData[key]) {
					data[key] = this.formData[key]
				} else {
					return show(`请填写${formDataCheck[key]}`);
					break;
				}
			}
			console.log(data)
		}
	}
}
</script>

<style scoped lang="scss">
.page {
	position: relative;
	box-sizing: border-box;
	padding: 0 50rpx;
	width: 100%;
	height: 100vh;
	margin: 0 auto;
}

.top {
	position: absolute;
	top: 0;
	left: 40rpx;
	width: 100%;
	height: 100rpx;

	.top-icon {
		width: 44rpx;
		height: 44rpx;
	}
}

.title {
	width: 100%;
	height: 200rpx;
	line-height: 200rpx;
	margin-bottom: 20rpx;
}

.form {
	width: 100%;

	.form-row {
		position: relative;
		width: 100%;
		height: 100rpx;
		margin-bottom: 20rpx;

		.form-row-title {
			width: 170rpx;
			line-height: 100rpx;
		}

		.form-row-input {
			height: 100%;

			input {
				width: 100%;
				height: 100%;
			}
		}

		.form-row-code {
			box-sizing: border-box;
			padding-left: 10rpx;
			line-height: 100rpx;
			color: #FDB175;
		}

		.m-line {
			position: absolute;
			width: 100%;
			left: 0;
			bottom: 0;
			right: 0;
		}
	}
}

.botton {
	width: 100%;
	margin-top: 140rpx;
	margin-bottom: 100rpx;

	.button {
		width: 100%;
		height: 90rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 90rpx;
		background: linear-gradient(180deg, #FDB175 5%, #F49C66 100%);
		margin-bottom: 20rpx;
	}

	.agreement {
		width: 100%;
		height: 50rpx;

		.checkbox {
			width: 48rpx;
			height: 48rpx;
			border-radius: 50%;
			box-sizing: border-box;
			border: 1px solid #e6166a;
			margin-right: 20rpx;

			.checkbox-box {
				width: 40rpx;
				height: 40rpx;
				box-sizing: border-box;
			}
		}
	}

}
</style>